<!doctype dhtml>

<script>
  import { post } from 'crud'
</script>

<h1>Admin login</h1>

<form :onsubmit="submit" class="thin">
  <div class="error note" :if="failure">
    Failure
  </div>

  <label>
    <h3>Email</h3>
    <input name="email" type="email" value="admin@example.com"
      autofocus autocomplete="email" class="fullsize">
  </label>

  <label>
    <h3>Password</h3>
    <input name="password" type="password" value="demo123"
      autocomplete="current-password" class="fullsize">
  </label>

  <p>
    <button class="fullsize" :disabled>Log in</button>
  </p>

  <script>
    submit(e) {
      this.disabled = true
      const data = Object.fromEntries(new FormData(e.target))

      post('/api/login', data).then(ret => {
        localStorage.$sid = ret.sessionId
        location.href = '/admin/'

      }).catch(err => {
        this.update({ failure: true, disabled: false })
      })
    }
  </script>

</form>
